<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sjg" uri="/struts-jquery-grid-tags"%>

<script type="text/javascript">
    var rowId = 0;

    $('fbox_areasGrid .ui-reset , #refresh_areasGrid').click(function(){
        $("#areasGrid").jqGrid('setGridParam',{search:false});
        var postData = $("#areasGrid").jqGrid('getGridParam','postData');
        $.extend(postData,{searchField:"",searchString:"",searchOper:""});
        $.extend(postData,{filters:""});
        $("#areasGrid").trigger("reloadGrid");
    });
    

    $.subscribe('areasGridRowSelected', function(event,data) {
        rowId = event.originalEvent.id;
        $( "#areasGrid_edit" ).button( "option", "disabled", false );
        $( "#areasGrid_delete" ).button( "option", "disabled", false );
    });

    $.subscribe('searchAreasGrid', function(event,data) {
        $("#areasGrid").jqGrid('searchGrid', {resize:true,drag:true,closeAfterSearch:true,closeOnEscape:true,sopt:['eq'],caption:"Search Area"} );
    });

    $.subscribe('addAreasGrid', function(event,data) {
        $("#areasGrid").jqGrid('editGridRow',"new",{resize:true,drag:true,closeOnEscape:true,closeAfterEdit:false,jqModal:true,width:350,left:310,top:20,reloadAfterSubmit:true,position:"last",afterSubmit:function(response, postdata) {return isError(response.responseText);}});
    });

    $.subscribe('editAreasGrid', function(event,data) {
        if(rowId!=0){
            $("#areasGrid").jqGrid('editGridRow',rowId,{resize:true,drag:true,closeOnEscape:true,closeAfterEdit:true,jqModal:true,width:350,left:310,top:20,reloadAfterSubmit:true,afterSubmit:function(response, postdata) {return isError(response.responseText);}});
        }else{
            alert("Sorry. Please select an area first.");
        }
    });

    $.subscribe('deleteAreasGrid',function(event,data){
        if(rowId!=0){
            $("#areasGrid").jqGrid('delGridRow',rowId,{resize:true,drag:true,closeOnEscape:true,closeAfterEdit:true,jqModal:true,left:310,top:20,reloadAfterSubmit:false,afterSubmit:function(response, postdata) {return isError(response.responseText);}});
        }else{
            alert("Sorry. Please select an areas first.");
        }
    });
    
    $.subscribe('areasGridComplete',function(event,data){
        $( "#areasGrid_search" ).button( "option", "disabled", false );
        $( "#areasGrid_add" ).button( "option", "disabled", false );
    });
    

    function isError(text) {
        if(text.indexOf('ERROR') >= 0) { return [false, text]; }
        return [true,''];
    }

</script>
<div class="gridOptsContainer">
    <sj:submit button="true" cssStyle="font-size:14px;" disabled="true" id="areasGrid_search" onClickTopics="searchAreasGrid" value="Search Area"/>
    <sj:submit button="true" cssStyle="font-size:14px;" disabled="true" id="areasGrid_add" onClickTopics="addAreasGrid" value="Add Area"/>
    <sj:submit button="true" cssStyle="font-size:14px;" disabled="true" id="areasGrid_edit" onClickTopics="editAreasGrid" value="Edit Area"/>
    <sj:submit button="true" cssStyle="font-size:14px;" disabled="true" id="areasGrid_delete" onClickTopics="deleteAreasGrid" value="Delete Area"/>
</div>
<s:url id="remoteurl" action="grid-areas"/>
<s:url id="editurl" action="edit-areas"/>
<s:url id="selectOptionsCollectors" action="select-collectors"/>
<s:url id="selectOptionsBranches" action="select-branches"/>
<sjg:grid
    id="areasGrid"
    caption="Cashmate Areas"
    dataType="json"
    href="%{remoteurl}"
    editurl="%{editurl}"
    gridModel="gridModel"
    groupField="['branch']"
    groupColumnShow="[true]"
    groupCollapse="false"
    groupText="['<b>{0} - {1} Area(s)</b>']"
    pagerButtons="true"
    pagerInput="true"
    rowList="10,20,50"
    rowNum="10"
    loadingText="Requesting Data..."
    width="970"
    shrinkToFit="true"
    pager="true"
    hoverrows="true"
    rownumbers="true"
    autoencode="true"
    viewrecords="true"
    navigator="true"
    navigatorAdd="false"
    navigatorDelete="false"
    navigatorEdit="false"
    navigatorSearch="false"
    navigatorView="true"
    onSelectRowTopics="areasGridRowSelected"
    onGridCompleteTopics="areasGridComplete"
    >

    <sjg:gridColumn name="areaid"
                    index="areaid"
                    title="Area No. (Not Editable)"
                    sortable="false"
                    key="true"
                    hidden="true"/>
    
    <sjg:gridColumn name="areaname"
                    index="areaname"
                    title="Area Name"
                    search="true"
                    sortable="true"
                    searchoptions="{sopt:['eq']}"
                    editable="true"
                    edittype="text"
                    editoptions="{maxlength:'45'}"
                    editrules="{required:true}"
                    align="center"
                    />
    
    <sjg:gridColumn name="areacode"
                    index="areacode"
                    title="Area Code"
                    search="true"
                    sortable="true"
                    searchoptions="{sopt:['eq']}"
                    editable="true"
                    edittype="text"
                    editoptions="{maxlength:'7'}"
                    editrules="{required:true}"
                    align="center"
                    />

    <sjg:gridColumn name="collector"
                    index="collector"
                    title="Collector"
                    sortable="true"
                    editable="true"
                    edittype="select"
                    search="true"
                    searchoptions="{sopt:['eq']}"
                    editoptions="{dataUrl : '%{selectOptionsCollectors}'}"
                    align="center"
                    />

    <sjg:gridColumn name="branch"
                    index="branch"
                    title="Branch"
                    editable="true"
                    edittype="select"
                    editoptions="{dataUrl : '%{selectOptionsBranches}'}"
                    align="center"
                    />
</sjg:grid>